<template>
  <div id="app">
    <div class="app-container">
      <!-- 筛选区域 -->
      <div class="filter-container">
        <el-form :model="state.queryData" class="filter-form">
          <el-row :gutter="10" >
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input v-model.trim="state.queryData.ccusname" placeholder="请输入名称" size="small" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="编码">
                <el-input v-model.trim="state.queryData.cCusCode" placeholder="请输入编码" size="small" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <div class="filter-actions">
                <el-button type="primary" @click="conditionEnter">查询</el-button>
                <el-button type="danger" @click="resetQuery">重置</el-button>
              </div>
            </el-col>
          </el-row>

        </el-form>


      </div>

      <!-- 表格工具栏 -->
      <div class="table-container">
        <!-- 表格区域 -->
        <div class="table-wrapper">
          <el-table
              v-loading="state.loading"
              :data="state.table.data"
              style="width: 100%"
              highlight-current-row
              max-height="700px"
              show-overflow-tooltip
              @selection-change="selecUpdateChange"
              empty-text="暂无数据"
          >
            <el-table-column type="selection" label="序号" width="60" align="center" fixed />
            <el-table-column label="客户编码" prop="cCusCode" fixed width="100"/>
            <el-table-column prop="ccusname" label="客户名称" width="180"/>
            <el-table-column prop="cCusRegCode" label="统一信用代码" />
            <el-table-column prop="ccusbank" label="银行账户" />
            <el-table-column prop="ccusaccount" label="银行账号" />
            <el-table-column prop="ccusphone" label="联系电话" />
            <el-table-column prop="Createtime" label="创建时间">
              <template #default="{ row }">
                <div>{{ parseTime(row.dcusdevdate, '{y}-{m}-{d}') }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页控件 -->
        <div class="pagination-container">
          <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="state.table.total"
              :page-size="state.table.pageSize"
              :current-page="state.table.currentPage"
              :page-sizes="[10, 20, 50, 100]"
              @size-change="handleSizeChange"
              @current-change="pageChange"
          />
        </div>
      </div>
    </div>
  </div>


</template>

<script setup lang="tsx">
import {computed, defineProps, reactive,defineEmits, ref, toRefs, watch,defineExpose} from "vue"
import {GetCumU8Customer} from "@/api/base"
import {debounce, parseTime} from "@/utils/util";
import {cubasdocStore} from "@/stores/modules/cubasdoc";

const emit = defineEmits(['success']);

const cubasdoc = cubasdocStore()

const props = defineProps({
  UserCode: {
    type: String,
    default: null
  }
})

let {UserCode} = toRefs(props)


//表格配置
const state: any = reactive({
  ids: [],
  roleList: [],
  queryData: {
    cCusCode:null,//客户编码
    ccusname:null,//客户名称
  },
  UserCode:'',
  table: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
    layout: "total,sizes, slot, prev, pager, next, jumper",
    prevText: "上一页",
    nextText: "下一页",
    // 接口返回数据
    data: [],
    firstColumn: { type: 'radio', fixed: true },
  },
  loading:false,
  customersList:[]
})



//选择项
const cusoptions = ref(cubasdoc.data)

// 最终参数获取
const getQueryData = computed(() => {
  const data = toRefs(state.queryData)
  let ccusname = {name: "ccusname", value: data.ccusname?.value,wheretype:'1'}
  let cCusCode = {name: "cCusCode", value: data.cCusCode?.value,wheretype:'1'}
  let UserCode = {name: "UserCode", value: state.UserCode,wheretype:'0'}
  //转换查询参数
  let where=[]
  console.log(state.UserCode,"state.UserCode")
  if(state.UserCode && state.UserCode !==''&& state.UserCode !==null){
    where.push(UserCode)
  }
  if(data.ccusname?.value && data.ccusname?.value !==''&& data.ccusname?.value !==null){
    where.push(ccusname)
  }
  if(data.cCusCode?.value && data.cCusCode?.value !=='' && data.cCusCode?.value !==null){
    where.push(cCusCode)
  }
  return {
    PageIndex: data.PageIndex?.value,
    PageSize : data.PageSize?.value,
    where
  }
})



//关闭弹窗
function closeDialog() {
  state.dialogSelectEnt = false
}

// 点击查询按钮
const resetQuery = () => {
  state.queryData = {
    cCusCode:null,//客户编码
    ccusname:null,//客户名称
    UserCode:state.UserCode,
  }
  state.table.currentPage =1
  state.table.pageSize = 10
  console.log(state.queryData,state.UserCode,"1212")
  getData(1)
}

// 点击查询按钮
const conditionEnter = (data: any) => {
  state.table.currentPage =1
  state.table.pageSize = 10
  getData(1)
}

// 选择当前页码
const pageChange = val => {
  state.table.currentPage = val
  getData(val)
}

// 选择当前页码
const handleSizeChange = val => {
  state.table.pageSize = val;
  getData(val)
}


// 获取数据
const getData = async pageNum => {

  state.loading = true
  getQueryData.value.PageIndex = state.table.currentPage
  getQueryData.value.PageSize= state.table.pageSize
  let data=await GetCumU8Customer(getQueryData.value);
  if (data.Code==='OK'){
    state.table.data = data.Data
    state.table.total = data.Total
  }
  state.loading = false
}




//下拉表格选择数据
const selecUpdateChange = (e) => {

  state.cums = e.map(item =>{
    return {
      Id: item.Id,
      CustCode:item.cCusCode,
      CustName:item.ccusname,
      UserCode:state.UserCode
    };
  })
  console.log(state.cums)

  emit('success', state.cums);
}

// 提交表单

//获取条款内容
const submitForm = debounce(async () => {

  state.loading = true

},false,1000)


// 监听debt-id变化自动刷新数据
watch(
    () => props.UserCode,
    (newVal, oldVal) => {
      state.UserCode = newVal
      // getData();
    },
    { immediate: true } // 初始加载时执行一次
);


// 监听debt-id变化自动刷新数据
defineExpose({
  getData,
});


</script>

<style lang="scss" scoped>
.app-container {
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.header {
  padding: 20px 25px;
  background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination-container{
  margin-top: 10px;
}
</style>
